declare const tinymce: any;

const setup = (editor, url) => {
  let articleData = {};
  let isHasRequest = false;
  const pluginName = '选择文章';
  // 获取文章数据
  const getArticles = function () {
    $.ajax({
      type: 'get',
      url: '/mock/articles.json',
      dataType: 'json',
    }).done(function (res) {
      articleData = res.data;
      opentabSelect(articleDomInit());
    }).fail(function (err) {
      // console.log(err);
    });
  };
  // 文章dom初始化
  const articleDomInit = function () {
    const tabsStructure = [];
    for (const key in articleData) {
      if (articleData.hasOwnProperty(key)) {
        const itemsArr:any = [{
          type: 'input',
          name: 'search',
          inputMode: 'search',
          placeholder: '搜索内容'
        }];
        const element = articleData[key];
        element.map(function (e) {
          itemsArr.push({
            type: 'checkbox',
            name: e.title + '|$' + e.link,
            label: e.title
          });
        });
        tabsStructure.push({
          name: key,
          title: key,
          items: itemsArr
        });
      }
    }
    return tabsStructure;
  };
  const openDialog = function () {
    if (!isHasRequest) {
      isHasRequest = true;
      getArticles();
    } else {
      opentabSelect(articleDomInit());
    }
  };
  // 弹出窗口
  const opentabSelect = function (tabsStructure) {
    return editor.windowManager.open({
      title: pluginName,
      body: {
        type: 'tabpanel',
        // tab面板
        tabs: tabsStructure
      },
      buttons: [
        {
          type: 'cancel',
          text: 'Close'
        },
        {
          type: 'submit',
          text: 'Save',
          primary: true
        }
      ],
      onChange(api, changeData) {
        console.log(api, changeData);
        if(changeData.name === 'search') {
          const data = api.getData();
          console.log(data);
          console.log(data.search);
          api.setData({
            '文章标题01|$https://baidu.com': false
          });
        }
      },
      onSubmit(api) {
        const data = api.getData();
        console.log(data);
        let insertHtml = '';
        for (const key in data) {
          if (data.hasOwnProperty(key)&&key!=='search') {
            if (data[key]) {
              const arr = key.split('|$');
              insertHtml += '<div><a href="' + arr[1] + '">' + arr[0] + '</a></div>';
            }
          }
        }
        // 将输入框内容插入到内容区光标位置
        editor.insertContent(insertHtml);
        api.close();
      }
    });
  };
  // 添加一个 添加文章 图标
  editor.ui.registry.addIcon('tabselect', '<svg style="width:21px;height:21px;" t="1584424131210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2493" width="200" height="200"><path d="M884.932677 203.143935L693.933216 10.48841a35.881402 35.881402 0 0 0-25.392992-10.48841h-552.021563A70.65876 70.65876 0 0 0 45.859901 70.65876v850.113208A70.65876 70.65876 0 0 0 116.518661 993.638814H377.072839a35.32938 35.32938 0 0 0 0-70.65876H151.848041a35.32938 35.32938 0 0 1-35.32938-39.745553V105.98814a35.32938 35.32938 0 0 1 35.32938-35.32938h425.056604v177.198922a70.65876 70.65876 0 0 0 70.65876 70.65876h177.198922v173.334771a35.32938 35.32938 0 1 0 70.65876 0V227.984906a35.32938 35.32938 0 0 0-10.48841-24.840971z m-201.487871 44.713747a35.32938 35.32938 0 0 1-35.32938-35.32938V70.65876l176.646901 177.198922z" fill="#333333" p-id="2494"></path><path d="M597.881464 449.897574H221.954779a35.32938 35.32938 0 0 0 0 70.65876H597.881464a35.32938 35.32938 0 0 0 0-70.65876zM356.096019 651.937466H232.443189a35.32938 35.32938 0 0 0 0 70.65876h123.65283a35.32938 35.32938 0 0 0 0-70.65876zM221.954779 318.516442H432.274995a35.32938 35.32938 0 1 0 0-70.65876H221.954779a35.32938 35.32938 0 0 0 0 70.65876z" fill="#333333" p-id="2495"></path><path d="M723.190359 1024m0-33.121294l0-375.374663q0-33.121294 33.121294-33.121294l0 0q33.121294 0 33.121294 33.121294l0 375.374663q0 33.121294-33.121294 33.121294l0 0q-33.121294 0-33.121294-33.121294Z" p-id="2496"></path><path d="M977.6723 836.312668m-33.121294 0l-375.374663 0q-33.121294 0-33.121294-33.121293l0 0q0-33.121294 33.121294-33.121294l375.374663 0q33.121294 0 33.121294 33.121294l0 0q0 33.121294-33.121294 33.121293Z" p-id="2497"></path></svg>');
  // 注册一个工具栏按钮名称
  editor.ui.registry.addButton('tabSelect', {
    tooltip: pluginName, // 鼠标经过提示文字
    icon: 'tabselect',
    onAction() {
      // Open window
      openDialog();
    }
  });
  // 注册一个菜单项名称 menu/menubar, which can then be included in any menu via the menu/menubar configuration
  editor.ui.registry.addMenuItem('tabSelect', {
    // icon: 'file',
    onAction() {
      openDialog();
    }
  });
  // editor.ui.registry.addButton('tabSelect', {
  //   text: 'tabSelect button',
  //   onAction: () => {
  //     // tslint:disable-next-line:no-console
  //     editor.setContent('<p>content added from tabSelect</p>');
  //   }
  // });
};

export default () => {
  tinymce.PluginManager.add('tabSelect', setup);
};
